<template>
  <div>
    <!-- 头部 -->
    <el-header height="100%">
      <el-row>
        <el-col :xs="24"
                :sm="12"
                :md="8"
                :lg="6">
          <div class="logo" @click="goHome" style="cursor: pointer;display: flex">
            <i style="font-size: 30px" class="el-icon-s-home">
              树荫文档
              <span style="font-size: 12px;font-weight: bold">
                在线文档与博客分享社区(内测版)
              </span>
            </i>
          </div>
        </el-col>
        <el-col :xs="24"
                :sm="12"
                :md="8"
                :lg="6">
          <el-input
              style="width: 80%;"
              placeholder="请输入关键词搜索文章" clearable
              v-model="searchQuery"
              prefix-icon="el-icon-search"
          ></el-input>
          <el-button type="text" @click="searchArticles">搜索</el-button>
        </el-col>
        <el-col :xs="24"
                :sm="12"
                :md="8"
                :lg="6">
          <div @click="goToQuillWritePage"
              style="cursor: pointer; padding: 5px; background-color: #f0f0f0; width: max-content;
              border: 1px solid #ccc; border-radius: 5px; text-align: center;">
            <!--发布图标-->
            <i class="el-icon-edit"></i>
            <span style="font-size: 18px;font-weight: bold">
              点击我发布文章
            </span>
          </div>
          <el-button v-if="userName==='6008'" type="text" @click="goToTestPage">测试页面</el-button>
        </el-col>
        <el-col :xs="24"
                :sm="12"
                :md="8"
                :lg="6" v-if="!isLoggedIn">
          <el-button type="primary" @click="goToLoginRegister" style="cursor: pointer;">登录/注册</el-button>
        </el-col>
        <el-col :xs="24"
                :sm="12"
                :md="8"
                :lg="6" v-else>
          <el-dropdown>
            <el-avatar style="cursor: pointer;"
                       :size="50"
                       :src="userAvatarUrl"
                       shape="circle"
            ></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="cursor: pointer;" @click="goToPersonalBlog">
                <span @click="goToPersonalBlog">个人中心</span>
              </el-dropdown-item>
              <el-dropdown-item @click="logout" style="cursor: pointer;">
                <span @click="logout">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
            <el-tag size="mini" type="danger" style="position: relative;bottom: 18px">{{ userName }}</el-tag>
          </el-dropdown>
          <el-button size="mini" type="text" @click="goToFollowingList" style="position: relative;bottom: 18px">
            关注列表
          </el-button>
          <el-button size="mini" type="text" @click="goToLikeList" style="position: relative;bottom: 18px">
            我的点赞
          </el-button>
          <el-button size="mini" type="text" @click="goToStarList" style="position: relative;bottom: 18px">
            我的收藏
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <!-- 主体 -->
    <el-main id="mainBody" style="height: 90%;background-color: rgba(204,204,204,0)">
      <router-view/>

      <!--handson表格测试页面-->
      <!--<LkUITableDemo/>-->
      <!--    &lt;!&ndash;文章编写页面&ndash;&gt;-->
      <!--    &lt;!&ndash;<QuillTextWrite/>&ndash;&gt;-->
      <!--    &lt;!&ndash;文章读取页面&ndash;&gt;-->
      <!--    &lt;!&ndash;<QuillTextRead/>&ndash;&gt;-->
      <!--    &lt;!&ndash;目录功能demo&ndash;&gt;-->
      <!--    &lt;!&ndash;<QuillTextCatalogDemo/>&ndash;&gt;-->
      <!--    &lt;!&ndash;文本定位demo&ndash;&gt;-->
      <!--    &lt;!&ndash;<TextOrientationTest/>&ndash;&gt;-->
      <!--    &lt;!&ndash;随机测试页面&ndash;&gt;-->
      <!--    &lt;!&ndash;<TestUI></TestUI>&ndash;&gt;-->
      <div style="background-color: #cccccc;margin-top: 2px" >
        <el-row>
            <el-col :span="8">
              <el-button type="text" @click="goToContact">联系作者</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" @click="goToDonate">捐赠作者</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" @click="goApiText">接口文档</el-button>
            </el-col>
        </el-row>
      </div>
    </el-main>
    <!-- 对话框 -->
    <el-dialog title="联系作者" :visible.sync="showAuthorDialog" width="90%" center>
      <el-row>
        <el-col :lg="24"
                :md="24"
                :sm="24"
                :xs="24"
        >
          <el-form  label-position="left" label-width="80px">
            <el-form-item label="QQ">
              <el-input v-model="qq" readonly></el-input>
              <el-button type="text" @click="copy(qq)">复制</el-button>
            </el-form-item>
            <el-form-item label="微信">
              <el-input v-model="wechat" readonly></el-input>
              <el-button type="text" @click="copy(wechat)">复制</el-button>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="email" readonly></el-input>
              <el-button type="text" @click="copy(email)">复制</el-button>
            </el-form-item>
            <el-form-item label="交流QQ群">
              <el-input v-model="qqGroup" readonly></el-input>
              <el-button type="text" @click="copy(qqGroup)">复制</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog title="捐赠作者" :visible.sync="showDonateDialog" width="90%" center>
      <el-row>
        <el-col :span="24">
          <el-form label-position="left" label-width="80px">
            <el-form-item label="支付宝">
              <el-input v-model="alipay" readonly></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import TextOrientationTest from "@/components/TextOrientationDemo";
import QuillTextCatalogDemo from "@/components/QuillTextCatalogDemo.vue";
import {getToken, getUserName, removeToken, removeUserName} from "@/api/token";
import lyy from "@/assets/img/lyy.jpeg";
import TestUI from "@/test/TestUI";
import {copyTextToClipboard} from "@/plugins/commen";
import LkUITableDemo from "@/components/LkUITableDemo";
export default {
  name: "Header",
  components: {
    LkUITableDemo,
    TestUI,
    TextOrientationTest,
    QuillTextCatalogDemo
  },
  computed: {},
  mounted() {
    this.scrollTop()
    // this.$router.push('/index/home')  // 此举动会造成 直接进入下级路由时  一直跳到home
    /**
     * 根据是否含有token  显示是否登录
     * @type {boolean}
     */
    this.isLoggedIn = getToken() != null;
    // console.log('登陆状态',this.isLoggedIn)
    this.getUserName()
  },
  data() {
    return {
      /**
       * 搜索查询
       */
      searchQuery: '',
      /**
       * 用户名
       */
      userName: '',
      /**
       * 是否登录
       */
      isLoggedIn: false,
      // 用户头像 URL
      userAvatarUrl: lyy,
      showAuthorDialog:false,
      qq:'2066687453',
      wechat:'无',
      showDonateDialog:false,
      alipay:'谢谢您!等我没钱您再捐赠!',
      email:'tomsavvy@163.com',
      qqGroup:'784515006',
    };
  },
  watch: {
    // 监听路由
    $route(to, from) {
      if (to.path !== '/index/home') {
        this.scrollTop()
      }
    },
},
  methods: {
    /**
     * 滚动到顶部
     */
    scrollTop(){
      document.querySelector('#mainBody').scrollTo({
        top:0,
        // behavior:'smooth'
      })
    },
    /**
     * 获取用户名
     * @returns {*}
     */
    getUserName() {
      this.userName = this.userName || getUserName()
    },
    /**
     * 跳转到首页
     */
    goHome() {
      this.$router.push('/index/home');
    },
    /**
     * 跳转到登录注册页面
     */
    goToLoginRegister() {
      this.$router.push('/login-register');
    },
    /**
     * 跳转到联系作者页面
     */
    goToContact() {
      if (!this.showAuthorDialog) {
        this.showAuthorDialog = true;
      }
    },
    /**
     * 跳转到捐赠作者页面
     */
    goToDonate() {
      if (!this.showDonateDialog) {
        this.showDonateDialog = true;
      }
    },
    copy(text) {
      copyTextToClipboard(text)
    },
    /**
     * 打开富文本编辑页面
     */
    goToQuillWritePage() {
      this.$router.push({
        path: '/index/edit-text'
      })
    },
    logout() {
      this.isLoggedIn = false;
      removeToken()
      removeUserName()
      this.goToLoginRegister()
    },
    searchArticles() {
      if(this.searchQuery==='')
        return
      // 这里可以发起请求到后端进行搜索，然后更新文章列表等
      this.$router.push({
        path: '/index/searchArticles',
        query: {
          searchQuery: this.searchQuery
        }
      });
    },
    goToPersonalBlog() {
      this.$router.push('/index/personal-blog/userBasicInfo');
    },
    /**
     * 关注列表
     */
    goToFollowingList() {
      this.$router.push('/index/personal-blog/articleFollowing');
    },
    /**
     * 我的点赞
     */
    goToLikeList() {
      this.$router.push('/index/personal-blog/articleLike');
    },
    /**
     * 我的收藏
     */
    goToStarList() {
      this.$router.push('/index/personal-blog/articleStar');
    },
    /**
     * api 文章
     */
    goApiText() {
      this.$router.push({
        path: '/index/read-text',
        query: {
          articleId: 0
        }
      })
    },
    goToTestPage(){
      this.$router.push('/index/test')
    }
  }
}
</script>

<style scoped>

</style>